<template>
  <div>
    <div class="shopcart" >
      <div class="content" @click='toggleList'>
        <!--左侧自适应区块：购物车图标、配送费和数量--->
        <div class="content-left">
          <!--购物车-->
          <div class="logo-wrapper">
            <div class="logo" :class="{'highlight':totalCount>0}">
              <span class='iconfont' :class="{'highlight':totalCount>0}">&#xe600;</span>
            </div>
            <!--商品数量-->
            <div class="num" v-show='totalCount>0'>{{totalCount}}</div>
          </div>
          <!--价格-->
          <div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
          <!--配送费-->
          <div class="desc">另需配送费{{deliveryPrice}}元</div>
        </div>
        <!--右侧结算固定宽度区块--->
        <div class="content-right" @click.stop.prevent='pay'>
          <div class="pay" :class='payClass'>{{payDesc}}</div>
        </div>
      </div>
      <!--小球飞动的特效---先不做，比较复杂--->
      <transition name='fold'>
        <!--已购买的商品列表-->
        <div class="shopcart-list" v-show="listShow">
          <!--购物车头部区域-->
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click='empty'>清空</span>
          </div>
          <!--购物车列表区域-->
          <div class="list-content" ref='listcontent'>
            <ul>
              <li class="food border-bottom" 
                  v-for="(food,index) in selectfoods" 
                  :key='index'
              >
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <div class="list-mask"  @click="hideList" v-show='listShow' transition='fade'></div>
  </div>
</template>

<script>
import cartcontrol from '../cartcontrol/cartcontrol'
import BScroll from 'better-scroll';

export default {
  name:'shopcart',
  data(){
    return{
      fold:true
    }
  },
  props:{
    //接收父组件goods的传来的selectFoods数组，每个元素包含食品的单价和其对应的数量
    selectfoods: {
      type: Array,
      default() {
        return [{
          price:0,
          count:0
        }];
      }
    },
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    }
  },
  components:{
    cartcontrol
  },
  computed:{
    //判断购物车列表页面是否折叠起来
    listShow(){
        if (!this.totalCount) {
          this.fold = true;
          return false;
        }
        let show = !this.fold;
        if(show){
          this.$nextTick(()=>{
            if(!this.scroll){
              this.scroll=new BScroll(this.$refs.listcontent,{
                click:true
            })}else{
              this.scroll.refresh();
            }
          })
        }
        return show;
    },
    //去结算的2种背景字体样式
    payClass() {
      if (this.totalPrice < this.minPrice) {
        return 'not-enough';//返回样式
      } else {
        return 'enough';
      }
    },
    //去结算的三种文字内容
    payDesc(){
      if(this.totalPrice===0){//js中不建议用==判断，因为双等号涉及隐式转换
        return '￥'+this.minPrice+'元起送'
      }else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice;
        return '还差￥'+diff+'元起送';
        } else {
          return '去结算';
        }
    },
    //所选商品的总价
    totalPrice() {
      let total = 0;
      this.selectfoods.forEach((food) => {
        total += food.price * food.count;
      });
      return total;
    },
    //所选商品数量，对应的num盒子的显示内容
    totalCount(){
      let count = 0;
      this.selectfoods.forEach((food) => {
        count += food.count;
      });
      return count;
    }
  },
  methods:{
    toggleList() {
        if (!this.totalCount) {
          return;
        }
        this.fold = !this.fold;
      },
    empty(){
       this.selectfoods.forEach((food) => {
        food.count=0;
      });
    },
    hideList(){
      this.fold=true
    },
    pay() {
      if (this.totalPrice < this.minPrice) {
        return;
      }
      window.alert(`需要支付${this.totalPrice}元`);
    }
  }
}
</script>

<style lang="stylus" scoped>
.shopcart
  position:fixed 
  left:0
  bottom:0
  z-index:50
  width:100%
  height:48px 
  .content
    display:flex
    background-color:#171d27
    color:rgba(255, 255, 255, 0.4)
    .content-left
      flex:1
      font-size:0
      .logo-wrapper
        display:inline-block
        position:relative
        top:-10px 
        margin:0 12px 
        padding:6px
        width:56px
        height:56px
        box-sizing:border-box
        vertical-align:top
        border-radius:50%
        background-color:#141d27
        .logo 
          width:100% 
          height:100% 
          border-radius:50%
          background-color: #2b343c
          text-align:center
          &.highlight
            background: rgb(0, 160, 220)
          .iconfont
            font-size:24px
            color: #80858a
            line-height:44px
            &.highlight
              color:#fff
              background-color: rgb(0, 160, 220)
        .num 
          position:absolute 
          top:0 
          right:0
          width:24px 
          height:16px 
          line-height:16px
          text-align:center
          background-color:red
          color:#fff
          font-size:9px
          border-radius:16px
          font-weight:700
          box-shadow:0 4px 8px 0 rgba(0,0,0,.4)
      .price 
        display: inline-block
        margin-top: 12px
        padding-right: 12px
        box-sizing: border-box
        border-right: 1px solid rgba(255, 255, 255, 0.1)
        line-height: 24px
        font-size: 16px
        font-weight: 700
        &.highlight 
          color:#fff
      .desc 
        display: inline-block
        min-width:82px 
        padding:0 12px
        line-height: 24px
        font-size: 10px
    .content-right
      flex:0 0 105px 
      width:105px
      background-color:#2b333b
      .pay 
        height: 48px
        line-height: 48px
        text-align: center
        font-size: 12px
        font-weight: 700
        &.not-enough
          background: #2b333b
        &.enough
          color: #ffffff
          background: #00b43c
  .shopcart-list
    position: absolute
    top: 0
    left: 0
    z-index: -1
    width: 100%
    transform: translate3d(0, -100%, 0)
    &.fold-transition
      transition: all 0.5s
      transform: translate3d(0, -100%, 0)
    &.fold-enter, &.fold-leave
      transform: translate3d(0, 0, 0)
    .list-header
      height: 40px
      line-height: 40px
      padding: 0 18px
      background: #f3f5f7
      border-bottom: 1px solid rgb(7, 17, 27,.1)
      .title
        float left
        font-size: 14px
        color: rgb(7, 17, 27)
      .empty
        float: right
        font-size: 12px
        color: rgb(0, 160, 220)
    .list-content 
      padding: 0 18px
      max-height: 217px
      overflow: hidden
      background: #fff
      .food
        position: relative
        padding: 12px 0
        box-sizing: border-box
        &.border-bottom:before 
          border-color:rgba(7, 7, 27, 0.1)
        .name
          line-height: 24px
          font-size: 14px
          color: rgb(7, 17, 27)
        .price
          position: absolute
          right: 90px
          bottom: 12px
          line-height: 24px
          font-weight: 700
          font-size: 14px
          color: red
        .cartcontrol-wrapper
          position: absolute
          right: 0
          bottom: 6px
.list-mask
  position:fixed 
  top:0 
  left:0 
  width:100%
  height:100%
  z-index:40px 
  background-color:rgba(7,17,27,.6)
  -webkit-backdrop-filter: blur(10px)
  backdrop-filter: blur(10px)
  &.fade-enter,.fade-leave-to 
    opacity:0 
  &.fade-enter-active,.fade-leave-active 
    transform: opacity .5s
</style>